<template>
  <div class="checktrends-section">
    <div id="checktrendsechart"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/utils/echarts";

let checktrendsechart = null;
/**
 * @description: 图表自适应
 */
const resize = () => {
  if (checktrendsechart) {
    checktrendsechart.resize();
  }
};

/**
 * @description: 接受数据
 * @param {*} info 图表数据
 */
let xDate = [];
let yDate1 = [];
let yDate2 = [];
const accept = (info) => {
  xDate = [];
  yDate1 = [];
  yDate2 = [];
  info.checkDirect.forEach((item) => {
    xDate.push(item.createTime);
    yDate1.push(item.checkCnt);
    yDate2.push(item.warnCnt);
  });
  nextTick(() => {
    initEchart();
  });
};
const initEchart = () => {
  checktrendsechart = null;
  echarts.init(document.getElementById("checktrendsechart")).dispose();
  checktrendsechart = echarts.init(
    document.getElementById("checktrendsechart")
  );

  let option = {
    tooltip: {
      show: true,
      backgroundColor: "rgba(9, 24, 48, 0.5)",
      borderColor: "rgba(75, 253, 238, 0.4)",
      textStyle: {
        color: "#CFE3FC",
      },
      formatter: (params) => {
        //   `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
        return (
          `${params.name}<br/>` +
          params.marker +
          `${params.seriesName}：` +
          `${params.data}`
        );
      },
    },

    legend: {
      right: 15,
      top: 12,
      textStyle: {
        color: "#fff",
      },
      itemWidth: 12,
      itemHeight: 10,
    },

    grid: {
      left: "2%",
      right: "2%",
      bottom: "2%",
      top: "20%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xDate,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#063374",
            width: 1,
            type: "solid",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#00c7ff",
          },
        },
      },
    ],
    yAxis: [
      {
        name: "次",
        nameTextStyle: {
          // y轴name的样式调整
          color: "#00baef",
          //   fontSize: 22,
          padding: [0, 40, 0, 0], // 加上padding可以调整其位置
        },
        type: "value",
        axisLabel: {
          formatter: "{value}",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#00c7ff",
            width: 1,
            type: "solid",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#063374",
          },
        },
      },
    ],
    series: [
      {
        name: "检查次数",
        type: "bar",
        data: yDate1,
        barWidth: 10, //柱子宽度
        barGap: 1, //柱子之间间距
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(24, 152, 226, 1)",
              },
              {
                offset: 1,
                color: "rgba(79, 90, 100, 0.1)",
              },
            ]),
            borderRadius: [11, 11, 0, 0],
          },
        },
      },
      {
        name: "隐患上报",
        type: "bar",
        data: yDate2,
        barWidth: 10,
        barGap: 1,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(246, 201, 92, 1)",
              },
              {
                offset: 1,
                color: "rgba(79, 90, 100, 0.1)",
              },
            ]),
            borderRadius: [11, 11, 0, 0],
          },
        },
      },
    ],
  };

  checktrendsechart.setOption(option);
};

defineExpose({ resize, accept });
</script>

<style scoped lang="scss">
.checktrends-section {
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  #checktrendsechart {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
